<template>
    <div class="middlekey-page">
      
      <!-- 催收已结案列表 -->
      <collectCaseClosed v-if="componentName=='collectCaseClosed'" @addTab="addTab"></collectCaseClosed>
      <!-- 催收结案待审批 -->
      <collectCasepending v-if="componentName=='collectCasepending'" @addTab="addTab"></collectCasepending>
      <!-- 案件池 -->
      <collectcasepool v-if="componentName=='collectcasepool'" @addTab="addTab"></collectcasepool>
      <!-- 催收列表 -->
      <collectList v-if="componentName=='collectList'" @addTab="addTab"></collectList>


      <!-- 催收列表 -->
      <financeManualentry v-if="componentName=='financeManualentry'" @addTab="addTab"></financeManualentry>
      <!-- 催收列表 -->
      <financeManualFlow v-if="componentName=='financeManualFlow'" @addTab="addTab"></financeManualFlow>
      
      <!-- 用户列表 -->
      <userList v-if="componentName=='userList'" @addTab="addTab"></userList>
      <!-- 用户详情页 -->
      <userInfoDetail v-if="componentName=='userInfoDetail'" :queryMsg="queryMsg"></userInfoDetail>

      <!-- 今日到期未还 -->
      <dueToday v-if="componentName=='dueToday'" @addTab="addTab"></dueToday>
      <!-- 到期未还审核资料 -->
      <dueMessage v-if="componentName=='dueMessage'" :queryMsg="queryMsg"></dueMessage>


      <!-- 案件详情 -->
      <collectionMessage v-if="componentName=='collectionMessage'" :queryMsg="queryMsg"></collectionMessage>


      <!-- 订单详情 -->
      <orderDetails v-if="componentName=='orderDetails'" :queryMsg="queryMsg"></orderDetails>
    </div>
</template>
<script>
    //催收管理
    import collectcasepool from "./page/collection/collectcasepool.vue"           //案件池
    import collectList from "./page/collection/collectList.vue"                   //催收列表
    import collectCasepending from "./page/collection/collectCasepending.vue"   //审批待结案列表
    import collectCaseClosed from "./page/collection/collectCaseClosed.vue"       //已结案列表
    import collectionMessage from "./page/collection/collectionMessage.vue"       //案件详情
    

    //财务管理
    import financeManualentry from "./page/finance/financeManualentry.vue"           //入账
    import financeManualFlow from "./page/finance/financeManualFlow.vue"             //入账流水
    
    //用户管理
    import userList from "./page/user/userList.vue"                                 //用户列表
    import userInfoDetail from "./page/user/userInfoDetail.vue"                     //用户信息页

    // 到期提醒管理
    import dueToday from "./page/warn/dueToday.vue"                                 //今日到期未还
    import dueMessage from "./page/warn/dueMessage.vue"                             //今日到期未还-审核资料

    //订单详情
    import orderDetails from "./userInfo/orderDetails.vue"                           //订单详情

    export default({
        props: ['componentName', 'queryMsg'],
        components: {
          collectcasepool,                  //催收管理--案件池
          collectList,                      //催收管理--催收列表
          collectCasepending,               //催收管理--审批待结案列表
          collectCaseClosed,                //催收管理--已结案列表
          collectionMessage,                //催收管理--案件详情

          financeManualentry,               //财务管理--入账
          financeManualFlow,                //财务管理--入账流水

          userList,                         //用户管理--用户列表
          userInfoDetail,                   //用户管理--用户信息    

          dueToday,                         //到期提醒管理--今日到期未还
          dueMessage,                       //到期提醒管理--用户信息

          orderDetails,                      //订单详情
        },
        methods: {
          addTab(obj) {
            let that = this;
            that.$emit('addTab', obj)
          }
        },
        computed:{
          orderDetailsObj(){
            return this.$store.state.orderDetailsObj
          }
        },
        watch: {
          orderDetailsObj(curVal,oldVal){
            var that = this;
            if(curVal){
              that.addTab(curVal)
            }
          }
        },
        created(){
          let that = this;
          console.log(222222)
          console.log(that.queryMsg,that.componentName)
        }
    })
</script>
<style lang="less">
  .el-tabs__item.is-active{
    color:#FF7500 !important;
  }
  .el-tabs__item:hover{
    color:#FF7500 !important;
  };
</style>
